<template>
    <div>
        <!--为echarts准备一个具备大小的容器dom-->
        <div class="main" ref="main" id="main" style="width: 100%; height: 1000px"></div>
    </div>
</template>

<script>
/* eslint-disable */
export default {
    name: "",
    data() {
        
    },
    methods: {
        drawHeatmap(id, data) {
            this.charts = this.$echarts.init(document.getElementById("main"));
            this.charts.setOption({
                color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
                title: {
                    text: 'POWER与其他特征之间的相关性展示'
                },
                legend: {},
                tigger: 'axis',
                tooltip: {
                    show: true
                },
                radar: [
                    {
                        indicator: [
                            { name: 'WS10', max: 1, min: -1 },
                            { name: 'DIR10', max: 1, min: -1 },
                            { name: 'WS30', max: 1, min: -1 },
                            { name: 'DIR30', max: 1, min: -1 },
                            { name: 'WS50', max: 1, min: -1 },
                            { name: 'DIR50', max: 1, min: -1 },
                            { name: 'WS70', max: 1, min: -1 },
                            { name: 'DIR70', max: 1, min: -1 },
                            { name: 'WSHUB', max: 1, min: -1 },
                            { name: 'DIRHUB', max: 1, min: -1 },
                            { name: 'TEMP', max: 1, min: -1 },
                            { name: 'PRESSURE', max: 1, min: -1 },
                            { name: 'RH', max: 1, min: -1 }
                        ],
                        center: ['50%', '50%'],
                        radius: 400,
                        axisName: {
                            color: '#fff',
                            backgroundColor: '#666',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    }
                ],
                series: [
                    {
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 1
                            }
                        },
                        data: [
                            {
                                value: [0.38, 0.05, 0.8, 0.06, 0.8, 0.04, 0.79, 0.005, 0.79, 0.005, -0.2, -0.32, 0.05],
                                name: 'Pearson相关系数',
                                areaStyle: {
                                    color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                                        {
                                            color: 'rgba(255, 145, 124, 0.1)',
                                            offset: 0
                                        },
                                        {
                                            color: 'rgba(255, 145, 124, 0.9)',
                                            offset: 1
                                        }
                                    ])
                                },
                                symbol: 'rect',
                                symbolSize: 12,
                                lineStyle: {
                                    type: 'dashed'
                                },
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value;
                                    }
                                }
                            }
                        ]
                    },
                ]
            });
        },
    },
    //调用
    mounted() {
        this.$nextTick(function () {
            this.drawHeatmap("main", this.chartData);
        });
    },
}
</script>

<style></style>